<template>
    <div>
      
        <div style="width:100%;height:.8rem;"></div>
        <div class="nolist" v-if="order_list_condition.length <=0">
          <span>暂无数据...</span>
        </div>
       <div v-else class="position" v-for="(item,index) in order_list_condition" :key="index" >
             <div class="position_list">
             <div class="list_name">
                 <span>产品编号</span>
                 <span>{{item.product_code}}</span>
             </div>
             <div class="list_text">
                 <div> <span>买卖：</span><span>{{item.direction==1?'买':'卖'}}</span>  </div>
                <div><span>开平：</span><span>{{item.ware==1?"开仓":(item.ware==2?"平仓":item.ware==3?"平今":'')}}</span></div>
             </div>
               <div class="list_text">
                 <div> <span>买入价格：</span><span>{{item.price}}</span>  </div>
                <div><span>保证金：</span><span>{{item.deposit}}</span></div>
             </div>
              <div class="list_text">
                 <div> <span>数量：</span><span>{{item.hand}}</span>  </div>
                <div><span>手续费：</span><span>{{item.fee}}</span></div>
             </div>
             <div class="list_text">
                 <div class="text_last"><span>描述：</span><span>{{item.msg}}</span></div>
                
                
             </div>
         </div>
         <div class="pos_button">
             <button @click="deletecondition(item)">删除</button>
             <button @click="deletewhole(item)">发送</button>
         </div>
       </div>
    </div>
</template>

<script>
export default {
    data(){
        return{
            order_id:'',
            order_list_condition: [],
        }
    },mounted(){
           this.get_order_list_condition();
             // this.timer.push("get_order_list_condition", this.get_order_list_condition);
    },
    methods:{
            get_order_list_condition() {
      var that = this;
      that
        .$http({
          //调用接口
          method: "GET",
          headers: {
            "Content-Type": "application/json; charset=UTF-8"
          },
          data: that.param,
          url: that.$serverUrl + "futures_orders_map"
        })
        .then(res => {
          that.order_list_condition = res.data.data;
        });
    },
       deletecondition(item) {
      //删除一个条件单
      this.condition_id = item.id;
      if (!this.condition_id) {
        return that.$message.error("请选中一笔进行操作！");
      }
      var that = this;
      that
        .$http({
          //调用接口
          method: "POST",
          headers: {
            "Content-Type": "application/json; charset=UTF-8"
          },
          data: {
            id: that.condition_id
          },
          url: that.$serverUrl + "futures_orders_del"
        })
        .then(res => {
          if (res.data.msg == "success") {
            that.$message.success(res.data.data);
            that.get_order_list_condition();
          } else {
            that.$message.error(res.data.msg);
          }
          this.activeClass2 = "-1";
        });
    },
    deletewhole(item) {
        this.id = item.id;
      var that = this;
      that
        .$http({
          //调用接口
          method: "POST",
          headers: {
            "Content-Type": "application/json; charset=UTF-8"
          },
          data: {},
          url: that.$serverUrl + "futures_orders_map_to_order?order_id="+this.id
        })
        .then(res => {
          if (res.data.msg == "success") {
            that.$message.success(res.data.data);
          } else {
            that.$message.error(res.data.msg);
          }
        });
    },
        back(){
            this.$router.go(-1)
        }
    }
}
</script>

<style scoped>
.position{
    width: 100%;
    height: 3.5rem;
    background: #f3f3f3;
    display:flex;
    justify-content: space-between;
     margin-top: .5rem;
     border-bottom: 1px solid #e0e0e0;
     border-top: 1px solid #e0e0e0;

    
}
.position_list{
    width: 75%;
    height: 3.5rem;
   
   
}
.list_name{
    width: 100%;
    height: .8rem;
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: .375rem;
    padding: 0 .3rem;
    box-sizing: border-box;
    color: #26a2ff;
    }
    .list_text{
        width: 100%;
        height: .6rem;
            display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 .3rem;
    box-sizing: border-box;
    font-size: .3rem;
    color: #666;
    }
    .text_last{
            color: #333;
    margin-top: 0.2rem;
    }
    .pos_button{
        width: 25%;
        height: 3.5rem;
    }
    .pos_button{
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
    }
    .pos_button button{
            background: #26a2ff;
    width: 1.8rem;
    height: .7rem;
    color: #fff;
    outline: none;
    }
    .nolist{
          font-size: .45rem;
    letter-spacing: 2px;
    color: #666;
    text-align: center;
    margin-top: 3rem;
    }
</style>
